import axios from "axios";
import store from "@/store";
import router from "@/router";
// 1. 配置函数axios
// 1.1 创建新的axios实例，配置基准接口路径，和其他配置
// 1.2 配置请求拦截器，把token放到请求头中
// 1.3 配置响应拦截器，剥离一层无用数据，处理401登录失效跳转登录
export const baseURL = "http://pcapi-xiaotuxian-front-devtest.itheima.net/";
const instance = axios.create({
  baseURL,
  timeout: 5000,
});
instance.interceptors.request.use(
  (config) => {
    // 携带token
    const { profile } = store.state.user;
    if (profile.token) {
      config.headers.Authorization = `Bearer ${profile.token}`;
    }
    return config;
  },
  (err) => Promise.reject(err)
);
// ret === { headers, configs, data, ... } 其中data才是后台数据
// (ret)=>ret.data 把ret.data返回出去，以后axios的响应成功结果就是后台的data数据
instance.interceptors.response.use(
  (ret) => ret.data,
  (err) => {
    // 401 会走这里，其他错误也会走，所以处理token失效需要判断状态
    if (err.response && err.response.status === 401) {
      router.push("/login");
    }
    return Promise.reject(err);
  }
);

// 2. 封装工具函数
// 2.1 三个参数：url,method,submitData (不用考虑提交数据放哪个选项)
// 2.2 函数里面：根据method去把提交数据放置对应的选项
// 2.3 把axios调用后的promise返回即可
/**
 * 请求工具函数
 * @param {string} url 请求地址
 * @param {string} method 请求方式
 * @param {object} submitData 提交数据
 * @returns Promise对象
 */
const request = (url, method, submitData) => {
  // axios({url,method,params,data}) === instance() 等价
  return instance({
    url,
    method,
    // submitData 应该放置哪个选项了？
    // 当请求方式是get的时候放params,当是其他请求方式一概放data
    // []插入一个动态的key，可以写变量，可以写三元，js表达式
    // method 传入：get Get GET ，为了程序健壮：转成小写再去匹配
    [method.toLowerCase() === "get" ? "params" : "data"]: submitData,
  });
};

export default request;
